import { defineConfig, presetUno, transformerDirectives } from "unocss";
import presetTagify from "@unocss/preset-tagify";
import presetRemToPx from "@unocss/preset-rem-to-px";

export default defineConfig({
  presets: [
    presetUno(),
    presetTagify({
      prefix: "un-",
    }),
    presetRemToPx({
      baseFontSize: 4,
    }),
  ],
  rules: [
    [/^font-size-([\.\d]+)$/, ([_, num]) => ({ "font-size": `${num}px!important` })],
    [/^w-([\.\d]+)$/, ([_, num]) => ({ width: `${num}px!important` })],
    [/^h-([\.\d]+)$/, ([_, num]) => ({ height: `${num}px!important` })],
    // m-20 margin:20px
    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    // p-20 pading:20px
    [/^p-([\.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
    // 多行省略
    [
      /^line-clamp-(\d+)$/,
      ([, num]) => ({
        overflow: "hidden",
        display: "-webkit-box",
        "-webkit-box-orient": "vertical",
        "-webkit-line-clamp": `${num}`,
      }),
    ],
    // 垂直对齐
    ["f-v", { display: "flex", "align-items": "center" }],
    // 水平对齐
    ["f-h", { display: "flex", "justify-content": "center" }],
    // 水平和垂直对齐
    ["center", { display: "flex", "justify-content": "center", "align-items": "center" }],
    // 两边对齐
    ["between", { display: "flex", "justify-content": "space-between" }],
  ],
  transformers: [transformerDirectives()],
  theme: {
    fontFamily: {
      pfm: '"PingFangSC-Medium", "PingFang SC"',
      pfr: '"PingFangSC-Regular", "PingFang SC"',
    },
  },
});
